SVG Layout

HTML is not ideal for arbitrary layouts. Let's make a wireframe in Inkscape, the free software illustration program. Here's what we made:



In [38]:

    
from ipywidgets import widgets as W
import traitlets as T
from IPython.display import display as show

from ipylayoutwidgets import widgets as DW

Let's add it as a layout layer. Here, we specify an svg_file rather than loading it ourselves, because of the tricky © character.



In [39]:

    
button = W.Button(description="Show SVG")



In [40]:

    
slider = W.IntSlider(min=0, max=3, description="Slide to reveal")



In [41]:

    
picture = W.HTML('<img src="http://jupyter.org/assets/main-logo.svg" class="img-responsive" />')



In [42]:

    
color = W.ColorPicker()



In [43]:

    
out = W.Output()



In [44]:

    
@W.interactive
def power(x=1.0, y=1.0):
    with out:
        print(x ** y)



In [45]:

    
dashboard = DW.FullscreenBox()

regions = {
    "slider": slider,
    "content.*": button,
    "main.*": picture,
    "extra-bottom.*": color,
    "extra-right.*": W.Box(children=[
        power, out
    ])
}

layout = DW.SVGLayoutBox(
    svg_file="layout-advanced.svg",
    widget_map=regions,
    children=list(regions.values()),
    visible_layers=["slider"],
    show_svg=False
)

dashboard.children = [layout]



In [46]:

    
@button.on_click
def click(foo):
    layout.show_svg = not layout.show_svg
    button.description = "Hide Layout" if layout.show_svg else "Show Layout"



In [47]:

    
@slider.on_trait_change
def slide(name, old, new):
    if name != "value":
        return

    layout.visible_layers = ["slider"] + (["*.{}".format(new)] if new else [])



In [48]:

    
@color.on_trait_change
def colorize(name, old, new):
    if name != "value":
        return

    dashboard.background_color = new



In [49]:

    
dashboard